<template>
    <div class="banner-list">
        <el-button type="primary" @click="addBanner"  class="anNiu"
      >添加轮播图 +
    </el-button>
    <!-- 表格组件 -->
    <!-- 
        index 如果设置了 type=index，可以通过传递 index 属性来自定义索引
        label 显示的标题
        prop  字段名称 对应列内容的字段名， 也可以使用 property属性
     -->
    <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" />
    <el-table-column prop="img" label="图片"  >
        <!-- template是表格的默认插槽  scope是作用域的意思
            自定义列的内容 作用域参数为 { row, column, $index }
            row 这一行的数据
            column 这一列
             $index 这一行的行号
            scope就是这三个参数传过来的值
            一旦加了插槽  prop的数据就会失效
        -->
        <template #default="scope">
            <!-- {{ scope.row.img}} -->
            <!-- 需要加冒号 v-bind 改成动态的 -->
            <img :src="scope.row.img" alt="" style="width: 100px;">
        </template>
    </el-table-column>>
    <el-table-column prop="link" label="图片链接" >
        <template #default="scope">
            <el-link  href="scope.row.link">链接</el-link>
        </template>
    </el-table-column>
    <el-table-column prop="alt" label="提示" />
    <el-table-column prop="flag" label="是否展示" >
        <template #default="scope">
            
            <el-switch v-model="scope.row.flag" @change="changeBanner(scope)"/>
        </template>
    </el-table-column>>
    <el-table-column  label="操作" >
        <template #default="scope">
            <el-button type="danger" @click="delBanner(scope)">删除</el-button>
        </template>
    </el-table-column>>
  </el-table>
    </div>
</template>

<script>
import {getBannerListAPI,updateBannerStateAPI,deleteBannerAPI} from '@/api/banner.js'
    export default {
        data(){
            return{
                tableData:[]
            }
        },
        methods:{
            // 点击添加轮播图按钮，跳转到新增轮播图页面
            addBanner(){
                this.$router.push('/banner/AddBanner')
            },
            // 加载轮播图列表  页面一加载就会加载轮播图列表
            loadBannerList(){
                getBannerListAPI().then((res)=>{
                   
                    this.tableData = res.data.data
                })
            },
            // 修改轮播图数据
            changeBanner(scope){
                updateBannerStateAPI({
                    bannerid:scope.row.bannerid,
                    flag:scope.row.flag
                })
            },
            // 删除单条轮播图数据
            delBanner(scope){
                deleteBannerAPI({
                    bannerid:scope.row.bannerid
                }).then((res)=>{
                    if(res.data.code == 200){
                        // 这里删除单条数据后需要重新加载页面
                        this.loadBannerList()
                    }
                })
            }
          
        },
        // 需要发送ajax  在数据还没挂载之前就发送请求
        created(){
            this.loadBannerList()
        }
    }
</script>

<style lang="less" scoped>
.banner-list {
    width: 100%;
    height: 100%;
}
.anNiu {
    margin: 5px;
}
</style>